<template>
<div id="container">
    <!-- 路由出口  用来显示spa网页组件切换显示 -->
    <router-view></router-view>
    <van-nav-bar class="page-nav-bar" type="info" title="登陆" left-text="" right-text="返回" ><van-icon  left-arrow name="cross" slot="left" @click="$router.back()" ></van-icon ></van-nav-bar>
    <!-- -----------------手机号--- -->
    <van-form ref="loginForm"  @submit="onSubmit">
        <van-cell-group>
            <van-field label="手机号:" name="mobile" required type="number" v-model="user. mobile" maxlength="11" :rules="userFormrules.mobile" placeholder="请输入手机号">
                <i slot="left-icon" class="font_family icon-shouji"></i>
            </van-field>
        </van-cell-group>

        <!-- ---------------验证码 -->
        <van-field v-model="user.code" required name="code" label="验证码:" placeholder="请输入验证码" :rules="userFormrules.code" type="number" maxlength="6">
            <i slot="left-icon" class="font_family icon-yanzhengma"></i>
            <template #button>
                <!--
            time: 倒计时时间
           -->
                <van-count-down v-if="isCountDownShow" :time="1000 *10" format="ss s" @finish="isCountDownShow = false" />
                <van-button v-else class="send-sms-btn" native-type="button" round size="small" type="default" @click="onSendSms">发送验证码</van-button>
            </template>
        </van-field>
        <!-- ------------------------------登陆- -->
        <van-button round size="large" @click="onSubmit" type="info">登陆</van-button>
    </van-form>


</div>
</template>

<script>
import {
    login,
    sendSms
} from '@/api/user'
// import {
//     login
// } from "@/api/user"
export default {
    name: "login",
    data() {
        return {
            user: {
                mobile: "13911111111",
                code: "246810"
            },

            // 从上到下一次校验
            userFormrules: {
                mobile: [{
                    required: "true",
                    message: "手机格式错误"
                }, {
                    pattern: /1[3|5|7|8|]\d{9}/,
                    message: '手机号格式错误'
                }],
                code: [{
                    required: "true",
                    message: "验证码错误"
                }, {
                    pattern: /\d{6}$/,
                    message: '验证码格式错误',

                }]
            },
            isCountDownShow: false

        }
    },
    methods: {
        async onSubmit() {
            // 获取表单数据,因为是调用上面的user
            // 再次定义
            const user = this.user
            // 1. 展示登陆中 loading
            this.$toast.loading({
                message: '登陆中...',
                forbidClick: true,
                duration: 1000
            });
            // 2. 请求登录
            try {
                const {data} = await login(user)
                // 先用解构来获取请求的返回信息

                this.$state.commit("setUser",data.data)
                //然后在通过 commit 来调用maputation里的方法,更改state里的数据
                this.$Toast.success('登陆成功');
                // 登录成功，跳转回原来页面
                this.$router.back()
            } catch (err) {
                this.isCountDownShow = false
                if (err.response.status === 400) {

                    this.$Toast.fail('手机号或者验证码错误');

                } else {
                    this.$Toast.fail('登陆失败');

                }
            }
        },
        async onSendSms() {
            try {
                await this.$refs.loginForm.validate("mobile")
            } catch (err) {
                return console.log("验证码错误" + err);
            }
            // 当发送成功的时候就为true
            this.isCountDownShow = true
            // 请求获取验证码
            try {
                await sendSms(this.user.mobile,)
                   this.$Toast.success('发送成功')
            } catch (err) {
                this.$Toast.fail('发送失败' + err)
                if (err.response.status === 429) {
                    this.$Toast.fail('发送太频繁' + err)
                } else {
                    this.$Toast.fail('发送失败稍后重试')
                }

            }

        }
    }
}
</script>

<style lang="less" scoped>
.navbar {
    background-color: #3296fa;
    color: white;
    border: none;
}

.send-sms-btn {
    background-color: antiquewhite;
}
</style>
